<template>
  <div class="chart-box">
    <el-row :gutter="20">
      <el-col :span="6"><div class="col-box" /></el-col>
      <el-col :span="6"><div class="col-box" /></el-col>
      <el-col :span="6"><div class="col-box" /></el-col>
      <el-col :span="6"><div class="col-box" /></el-col>
    </el-row>
    <div style="height:400px"><topo /></div>
    <el-row :gutter="20">
      <el-col :span="8"> <barChart :bar-data="barData" /></el-col>
      <el-col :span="8"> <pieChart :pie-data="pieData" /></el-col>
      <el-col :span="8"> <lineChart :line-data="lineData" /></el-col>
    </el-row>
    <div style="height:600px; border: 1px solid pink;margin-top: 20px">
      <topo2 /></div>
  </div>

</template>

<script>
import '@/mock'
import lineChart from '@/components/charts/line.vue'
import barChart from '@/components/charts/bar.vue'
import pieChart from '@/components/charts/pie.vue'
import topo from '@/components/charts/topo.vue'
import topo2 from '@/components/charts/topo2.vue'
import { getLineData, getBarData, getpieData } from '@/api/chart'
export default {
  components: {
    lineChart,
    barChart,
    pieChart,
    topo,
    topo2
  },
  data() {
    return {
      lineData: {},
      barData: {},
      pieData: {}
    }
  },
  created() {
    this.getChartData()
  },
  methods: {
    getChartData() {
      getLineData.then(res => {
        console.log('line-data:', res)
        this.lineData = res.data
      })
      getBarData.then(res => {
        this.barData = res.data
      })
      getpieData.then(res => {
        this.pieData = res.data
      })
    }
  }
}
</script>

<style>
  .chart-box {
    padding: 50px;
    padding-top: 20px;
    background-color: #f1f1f1;
  }
  .col-box {
    background-color: #fff;
    box-shadow:  0 0px 15px 0px #ccc;
    height: 100px;
    border-radius: 0px;
  }
</style>
